<template>
<div style="background-color: #fff;height: 89.8vh;">
  <div id="tool">
    <el-button type="success" @click="newButton">新增</el-button>
    <el-button @click="batchRemove" type="danger">批量删除</el-button>
    <el-button @click="showUpload" type="primary" >导入</el-button>
    <el-button @click="batchOut"  type="primary">导出</el-button>
    <el-divider>
      <el-icon><Search /></el-icon>
    </el-divider>
    <el-row>
      <el-col style="text-align: center" :span="2">
        <el-button @click="search" type="primary">搜索</el-button>
      </el-col>
    </el-row>
    <el-divider>
      <el-icon><Document /></el-icon>
    </el-divider>
  </div>
  <el-table :row-class-name="tableRowClassName" ref="exampleTable" row-key="exampleNo" :data="exampleData" stripe>
    <el-table-column  type="selection" width="55" />
      <el-table-column align="center" prop="exampleNo" label="用例编号"  />
      <el-table-column align="center" prop="exampleName" label="用例名" width="200" />
<!--      <el-table-column align="center" prop="exampleModel" label="父级"  />-->
      <el-table-column width="100" align="center" prop="exampleInfo" label="描述"  >
        <template #default="scope">
          <el-popover
              placement="top"
              :width="300"
              trigger="click"
              :content="scope.row.exampleInfo"
              v-if="scope.row.exampleInfo!=null"
          >
            <template #reference>
              <el-button class="m-2">查看详情</el-button>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="exampleMethod" label="请求方式"  />
      <el-table-column width="100" align="center" prop="exampleRequest" label="请求参数"  >
        <template #default="scope">
          <el-popover
              placement="top"
              :width="300"
              trigger="click"
              :content="scope.row.exampleRequest"
              v-if="scope.row.exampleRequest!=null"
          >
            <template #reference>
              <el-button class="m-2">查看详情</el-button>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column width="100" align="center" prop="exampleResponse" label="返回值"  >
        <template #default="scope">
          <el-popover
              placement="top"
              :width="300"
              trigger="click"
              :content="scope.row.exampleResponse"
              v-if="scope.row.exampleResponse!=null"
          >
            <template #reference>
              <el-button class="m-2">查看详情</el-button>
            </template>
          </el-popover>
        </template>
      </el-table-column>
    <el-table-column width="100" align="center" prop="exampleHead" label="请求头"  >
      <template #default="scope">
        <el-popover
            placement="top"
            :width="300"
            trigger="click"
            :content="scope.row.exampleHead"
            v-if="scope.row.exampleHead!=null"
        >
          <template #reference>
            <el-button class="m-2">查看详情</el-button>
          </template>
        </el-popover>
      </template>
    </el-table-column>

      <el-table-column align="center" prop="exampleVerify" label="验证函数"  />
      <el-table-column width="205" align="center" prop="exampleUrl" label="请求地址"  />
      <el-table-column align="center" prop="exampleLink" label="相关链接"  />
      <el-table-column align="center" prop="exampleError" label="异常信息"  />
      <el-table-column align="center" prop="exampleResult" label="测试结果"  >
        <template #default="scope">
          <template v-if="scope.row.exampleResult==1">
            通过
          </template>
          <template v-if="scope.row.exampleResult==2">
            驳回
          </template>
        </template>
      </el-table-column>
    <el-table-column align="center" prop="exampleDate" label="测试时间"  />

      <el-table-column align="center" prop="exampleIndex" label="索引"  />
      <el-table-column align="center" label="类型"  >
        <template #default="scope">
          <template v-if="scope.row.exampleType==1">
            模块
          </template>
          <template v-if="scope.row.exampleType==2">
            接口
          </template>
          <template v-if="scope.row.exampleType==3">
            用例
          </template>
        </template>
      </el-table-column>
    <el-table-column align="center" label="操作" width="250">
      <template #default="scope">
        <el-button @click="updateButton(scope.row)" type="warning">修改</el-button>
        <el-button @click="removeButton(scope.row.exampleNo)" type="danger">删除</el-button>
        <el-button @click="run(scope.row)" type="success">运行</el-button>

      </template>
    </el-table-column>
  </el-table>
<paging @init="loadTable" v-model:count="count"  v-model:limit="limit"  v-model:page="page"></paging>
</div>

  <el-dialog draggable v-model="exampleFormDisplay">
    <example-form @submitExampleForm="submitExampleForm" @closeExampleForm="closeExampleForm" ref="ExampleFormView"></example-form>
  </el-dialog>
  <el-dialog draggable v-model="uploadDisplay">
    <upload @batchImport="batchImportExample"></upload>
  </el-dialog>
</template>
<script setup>
import {onMounted, reactive, ref} from "vue";
import {
  batchAddExample,
  batchOutExample,
  batchRemoveExample,
  getAllExample,
  removeExample,
  runExample,
  searchExample
} from "../../request/ExampleApi.js";
import {Document, Search} from "@element-plus/icons-vue";
import ExampleForm from "../../components/form/exampleForm.vue";
import {ElMessage} from "element-plus";
import Paging from "../../components/Paging.vue";
const ExampleFormView=ref()
const exampleData=ref([])
const page=ref(1)
const limit=ref(10)
const count=ref(0)
const exampleFormDisplay=ref(true);
const exampleTable=ref()
import moment from "moment"
import Upload from "../../components/upload.vue";
const uploadDisplay=ref(true)
const searchForm =reactive({
  page:page.value,
  limit:limit.value
})
const showUpload=()=>{
  uploadDisplay.value=true
}
const run=(data)=>{
  data.children=null
  runExample(data).then(response=>{
    if(response.state=="200"){
      ElMessage.success("测试通过")
    }
    init()
  })
}
const loadTable=(newPage,newLimit)=>{
  page.value=newPage
  limit.value=newLimit
  searchForm.page=newPage
  searchForm.limit=newLimit;

    init()

}
const search=()=>{
  searchExample(searchForm).then((response)=>{
      exampleData.value=response.data
    count.value=response.count
  })
}
const batchImportExample=(files)=>{
  batchAddExample({"exampleArray":files}).then((response)=>{
    if(response.state=="200"){
      ElMessage.success("导入成功")
      init();
      uploadDisplay.value=false;
    }
  })
}
const tableRowClassName = (row,rowIndex) => {
  console.log(row.row.exampleResult)
  if (row.row.exampleResult === 1) {
    console.log("success")
    return 'success-row'
  } else if (row.row.exampleResult === 2) {
    return 'warning-row'
  }
  return ''
}
const batchOut=()=>{
  let rows=exampleTable.value.getSelectionRows()
  if(rows.length>0){
    for (let i = 0; i < rows.length; i++) {
      rows[i]=JSON.stringify(rows[i])
    }
    batchOutExample({exampleArray:rows}).then((response)=>{
      const url = window.URL.createObjectURL(new Blob([response]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', 'Example:'+ moment(new Date()).format("yyyy-MM-DD-HH-mm-ss")+'.xls'); // 指定下载的文件名
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
      ElMessage.success("导出成功")
    })
  }else {
    ElMessage.warning("请最少选中一行")
  }
}
const batchRemove=()=>{
  let rows=exampleTable.value.getSelectionRows()
  if( rows.length>0){
    let id=""
    for (let i = 0; i < rows.length; i++) {
    id+=rows[i].exampleNo+","
    }
    id=id.substring(0,id.length-1)
    batchRemoveExample(id).then((response)=>{
      if(response.state=="200"){
        ElMessage.success("删除成功")
        init()
      }
    })
  }else {
    ElMessage.warning("请最少选中一行")
  }

  console.log()
}
const init=()=>{
  getAllExample(page.value,limit.value).then(response=>{
  exampleData.value=response.data
    count.value=response.count
  })
}
const removeButton=(exampleNo)=>{
  removeExample(exampleNo).then((response)=>{
    if(response.state=="200"){
      ElMessage.success("删除成功")
      init()
    }
  })
}
const updateButton=(row)=>{
  exampleFormDisplay.value=true;
    ExampleFormView.value.fillForm(row)
}
const submitExampleForm=()=>{
    exampleFormDisplay.value=false;
  init()
}
const closeExampleForm=()=>{
    exampleFormDisplay.value=false;
}
const newButton=()=>{
    exampleFormDisplay.value=true;
    ExampleFormView.value.rest(true)


}
onMounted(()=>{
    exampleFormDisplay.value=false
  uploadDisplay.value=false
  init();
})
</script>
<style scoped lang="scss">
#tool{
  background-color: #fff;
  padding: 10px;
}
.warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
